import React, {Component} from 'react';
import {View, Text, StatusBar,ImageBackground, StyleSheet, TouchableOpacity} from "react-native";
import {pxToDp} from "../utils/styleKits";
import icon from "../utils/icon";
import {NavigationContext} from '@react-navigation/native';

class Header extends Component {
  static contextType = NavigationContext;

  static defaultProps = {
    title: '标题',
    leftTitle: '返回',
    leftIcon: icon.iconfanhui,
    leftPress: null,   // ()=>{this.context.goBack()} 有默认行为，默认返回
    rightTitle: '',
    rightIcon: '',
    rightPress: ()=>{},
  };

  render() {
    let {leftPress} = this.props;
    if (!leftPress){
      leftPress = ()=>this.context.goBack();
    }
    return (
      <View>
        <StatusBar translucent backgroundColor={"transparent"}/>
        <ImageBackground source={require('../images/headbg.png')} style={styles.imgBg}>
          <View style={styles.titleBox}>
            {/*左*/}
            <TouchableOpacity style={styles.goBackBox} onPress={leftPress}>
              <Text style={{fontFamily: 'iconfont', color: '#fff'}}>{this.props.leftIcon}</Text>
              <Text style={{color: '#fff'}}>{this.props.leftTitle}</Text>
            </TouchableOpacity>

            {/*中*/}
            <Text style={styles.title}>{this.props.title}</Text>

            {/*右*/}
            <TouchableOpacity style={styles.right} onPress={this.props.rightPress}>
              <Text style={{color:'#fff'}}>{this.props.rightTitle}</Text>
              <Text style={{fontFamily: 'iconfont', color: '#fff',fontSize:pxToDp(16)}}>{this.props.rightIcon}</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imgBg: {
    width: '100%',
    height: pxToDp(70),
  },
  titleBox:{
    flexDirection: 'row',
    marginTop: pxToDp(20),
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    color: '#fff',
    flex: 1,
    textAlign: 'center',
    fontSize: pxToDp(20)
  },
  goBackBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: pxToDp(10),
  },
  right:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    margin:pxToDp(10)
  }
});

export default Header;